<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>付费会员卡</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>付费会员卡</h3>
    </el-card>
    <el-card>
      <el-row>
        <el-col :span="14">
          <el-row>
            <el-col :span="5">
              <div class="ju-li">会员名称</div>
            </el-col>
            <el-col :span="19">
              <el-input
                class="djmc"
                v-model="this.$route.query.id"
                placeholder="会员名称"
              ></el-input>
            </el-col>
          </el-row>
          <el-row class="shangxia">
            <el-col class="ju-li" :span="3"> 背景色 </el-col>
            <el-col :span="10">
              <el-select v-model="formbengji" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row class="shangxia">
            <el-col class="ju-li" :span="3">开卡条件</el-col>
            <el-col :span="3">
              <el-checkbox class="tj" v-model="a">付费</el-checkbox></el-col
            >
            <el-col :span="14">
              <div class="djmc">
                <el-input placeholder="请输入内容" v-model="input1">
                  <template slot="append">元</template>
                </el-input>
              </div></el-col
            >
          </el-row>
          <el-row class="shangxia">
            <el-col class="juli1" :span="3">有效期</el-col>
            <el-col :span="3">
              <el-radio v-model="radio" label="2">永久有效</el-radio>
            </el-col>

            <el-col :span="14">
              <div class="djmc">
                <el-input placeholder="请输入内容" v-model="input11">
                  <template slot="append">有效</template>
                </el-input>
              </div></el-col
            >
          </el-row>
          <!-- <el-row>
            <el-col class="amsd" :span="4">
              <el-radio v-model="radio" label="1" class="qwqwwq"
                >自获取之日期</el-radio
              >
            </el-col>

          </el-row> -->
          <el-row>
            <el-col class="juli1" :span="3">续卡提醒</el-col>
           <el-col :span="14">
              <div class="djmc">
                <el-input placeholder="请输入内容" v-model="input12">
                </el-input>
              </div></el-col
            >
         
          </el-row>
          <!-- <el-row>
            <el-col class="amsd" :span="4">
              <el-radio v-model="radio" label="4" class="qwqwwq"
                >距离到期前</el-radio
              >
            </el-col>
           
          </el-row> -->

          <el-row class="shangxia">
            <el-col class="ju-li" :span="3">会员权益</el-col>
            <el-col :span="10">
              <div class="djmc">
                <el-input placeholder="请输入内容" v-model="input3">
                  <template slot="append">元</template>
                </el-input>
              </div></el-col
            >
            <!-- <el-col :span="4">
              <el-checkbox class="tj" v-model="butt"
                >成长加速</el-checkbox
              ></el-col
            > -->
          </el-row>
          <!-- <el-row class="shangxia">
            <el-col class="amsd" :span="4">
              <el-checkbox class="tj" v-model="abcdefg"
                >商品折扣</el-checkbox
              ></el-col
            >
          </el-row> -->
          <!-- <el-row class="shangxia">
            <el-col class="amsd" :span="4">
              <el-checkbox class="tj" v-model="abcdefgl"
                >积分翻倍</el-checkbox
              ></el-col
            >
          </el-row> -->
          <!-- <el-row class="shangxia">
            <el-col class="amsd" :span="4">
              <el-checkbox class="tj" v-model="ab"
                >送优惠劵</el-checkbox
              ></el-col
            >
            <el-row> -->
          <!-- <el-link type="primary" :underline="false"
                >选择优惠劵</el-link
              ></el-row
            >
          </el-row> -->
          <!-- <el-row class="shangxia">
            <el-col class="amsd" :span="3">
              <el-checkbox class="tj" v-model="abcdef"
                >送积分</el-checkbox
              ></el-col
            > -->
          <!-- </el-row> -->
          <!-- <el-row>
            <el-col class="hyqy" :span="24">
              <el-link type="primary" :underline="false" 
                >配置会员权益</el-link
              ></el-col
            >
          </el-row> -->

          <el-row class="cmmtn">
            <el-col :span="3" :offset="4">
              <el-button type="primary" @click="tijiao">提交</el-button>
            </el-col>
            <el-col :span="3">
              <el-button @click="fanhui">返回</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <div class="bunt">
            <el-row>
              <el-col>会员名称</el-col>
              <el-col>
                <el-row>
                  <el-col> <span class="zhiti-dx">560</span> /1000</el-col>
                  <el-col>成长值 距离升级还有500成长值</el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formbengji: "",
      input11:'',
      input12:"",
      radio: "1",
      radio: "3",
      percentage: "",
      abcdefgl: "",
      checked: true,
      a: true,
      ab: "",
      abc: true,
      abc: true,
      abcd: true,
      abcde: true,
      abcdef: true,
      abcdefg: true,
      butt: true,
      input2: "",
      input: "",
      input1: "",
      input3: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    fanhui() {
      this.$router.push("/home/ClubCard");
    },
    tijiao() {
      this.$axios({
        url: "/vip/payCard/update",
        method: "post",
        data: {
          id: this.$route.query.id, //会员名称
          name: this.input1, //开卡条件

          balance: this.input12, //续卡提醒

          validity: this.input11, //有效期

          //  reminder:this.form.region,
          rights: this.input3, //会员权益
        },
      }).then((res) => {
        console.log(res);
        this.$router.push("/home/ClubCard");
      });
      // this.$axios({
      //   url: "/vip/payCard/update",
      //   method: "post",
      //   data: {
      //     id: this.input,
      //     name: this.a,
      //   },
      // });
    },
  },
};
</script>
 <style lang="less" scoped>
.hyqy {
  margin-left: 150px;
  margin-bottom: 40px;
}
.qwqwwq {
  line-height: 45px;
}
.amsd {
  margin-left: 164px;
}
.tj {
  margin-top: 10px;
}
.juli1 {
  margin-left: 60px;
}
.cmmtn {
  margin-top: 25px;
}
.mcn {
  margin-block: 10px;
}
.ti1 {
  margin-left: 300px;
}
.ju-li {
  margin-left: 60px;
  line-height: 45px;
}

.shangxia {
  margin-top: 20px;
}
.djmc {
  width: 300px;
}
.hueyan {
  margin: 10px;
}
.zhiti-dx {
  font-size: 25px;
}
.bunt {
  width: 350px;
  height: 200px;
  background: rgb(233, 219, 31);
  border-radius: 20px;
  margin-left: 100px;
  color: #fff;
  > .el-row > .el-col:first-child {
    margin: 30px 20px;
  }
  > .el-row > .el-col:last-child {
    margin-top: 25px;
    margin-left: 20px;
  }
}
</style>



 
   

    <!-- 导航面包屑 -->
    <!-- <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级管理</el-breadcrumb-item>
        <el-breadcrumb-item>编辑会员等级</el-breadcrumb-item>
        <span class="guan-li"> <h2>编辑会员等级</h2> </span>
      </el-breadcrumb>
    </el-card>
    <div class="gao-kuan">
      <div class="gao-li">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="等级名称">
            <el-input
              class="djmc"
              v-model="input"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="背景色">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="升级条件">
            <el-col :span="11">
              <el-checkbox v-model="checked">注册会员</el-checkbox
              ><span class="juli3">设置会员注册信息</span>
            </el-col>
            <div>
              <el-col :span="11" style="float: none">
                <el-checkbox v-model="abc"
                  >累计消费
                  <span class="juli2"
                    ><el-input
                      class="inpu"
                      v-model="input"
                      placeholder="请输入内容"
                    ></el-input>
                    <el-button size="medium">元</el-button></span
                  ></el-checkbox
                >
              </el-col>
            </div>

            <div class="czz">
              <el-col :span="11" style="float: none">
                <el-checkbox v-model="abcd"
                  >成长值
                  <span class="juli"
                    ><el-input
                      class="inpu"
                      v-model="input"
                      placeholder="请输入内容"
                    ></el-input
                  ></span>
                </el-checkbox>
              </el-col>
            </div>
          </el-form-item>
          <el-form-item label="会员权益">
            <el-col :span="11">
              <el-checkbox v-model="abcde">成长加速</el-checkbox></el-col
            >
          </el-form-item>
          <el-form-item>
            <el-col :span="11">
              <el-checkbox v-model="abcdef">商品折扣</el-checkbox></el-col
            >
          </el-form-item>
          <el-form-item>
            <el-col :span="11">
              <el-checkbox v-model="abcdefg">积分翻倍</el-checkbox></el-col
            >
          </el-form-item>
          <el-form-item>
            <el-col :span="11">
              <span><a href="">配置会员权益</a></span>
            </el-col>
          </el-form-item>
          <el-form-item label="升级礼包">
            <el-col :span="11">
              <el-checkbox v-model="a">送优惠劵</el-checkbox
              ><span class="juli3">选择优惠劵</span>
            </el-col>
          </el-form-item>
          <div>
            <el-form-item>
              <el-col :span="11" style="float: none">
                <el-checkbox v-model="ab"
                  >送积分
                  <span class="juli2"
                    ><el-input
                      class="inpu"
                      v-model="input"
                      placeholder="请输入内容"
                    ></el-input>
                    <el-button size="medium">分</el-button></span
                  ></el-checkbox
                >
              </el-col>
            </el-form-item>
          </div>
          <el-row>
            <el-form-item>
              <el-button type="primary">提交</el-button>
              <el-button>返回</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      
      </div>
      <div class="tupian">
       <span class="tupian-zi">会员名称</span>
       <span class="tupian-2"><span class="tupian-3">560/1000</span><el-progress 
       :text-inside="true" :stroke-width="20" 
       :percentage="70"></el-progress></span>
       <span class="tupian-4" >成长值 距离升级还有600成长值</span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.tupian-zi{
  font-size: 30px;
  position: relative;
  top:10%;
  left: 10%;
  
}
.tupian-2{
  position: relative;
  left: 0%;
  top: 40%;
}
.tupian-3{
  font-size: 30px;
  position: relative;
  left: -20%;
  top: 0%;
}
.tupian-4{
  position: relative;
  left: 20%;
  top: 50%;
}
.tupian{
  height: 280px;
  width: 400px;
  background: rgb(6, 230, 6);
  border-radius: 20px;
  position: relative;
  left: 75%;
  top: -80%;
}
.guan-li {
  line-height: 50px;
}
.gao-li {
  margin-left: 200px;
}
.shang {
  margin-top: 30px;
}
.gao-kuan {
  margin-top: 20px;
  height: 800px;
  width: 100%;
  background: white;
  .djmc {
    width: 300px;
  }
  .czz {
    padding-top: 30px;
  }
  .juli {
    margin-left: 30px;
  }
  .juli2 {
    margin-left: 20px;
  }
  .juli3 {
    margin-left: 25px;
  }
} -->
<!-- // .inpu{
//   // float: left;
// }
// </style>
// <script>
// export default {
//   data() {
//     return {
//       checked: true,
//       a: true,
//       abc: true,
//       abc: true,
//       abcd: true,
//       abcde: true,
//       abcdef: true,
//       abcdefg: true,
//       input2: "",
//       input: "",
//       form: {
//         name: "",
//         region: "",
//         date1: "",
//         date2: "",
//         delivery: false,
//         type: [],
//         resource: "",
//         desc: "",
//       },
//     };
//   },
//   methods: {
//     onSubmit() {
//       console.log("submit!");
//     },
//   },
// };
// </script> -->
    <!-- 导航面包屑 -->
    <!-- <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>付费会员卡</el-breadcrumb-item>
        <span class="guan-li"> <h2>付费会员卡</h2> </span>
      </el-breadcrumb>
    </el-card>
    <div class="gao-kuan">
      <div class="gao-li">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="会员卡名">
            <el-input
              class="djmc"
              v-model="input"
              placeholder="超级会员"
            ></el-input>
          </el-form-item>
          <el-form-item label="背景色">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="颜色1" value="shanghai"></el-option>
              <el-option label="颜色2" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <div class="gao-du">
            <el-form-item label="开卡条件">
              <el-col :span="11" style="float: none">
                <el-checkbox v-model="checked"
                  >付费
                  <span class="juli2"
                    ><el-input
                      class="inpu"
                      v-model="input"
                      placeholder="请输入内容"
                    ></el-input>
                    <el-button size="medium">元</el-button></span
                  ></el-checkbox
                >
              </el-col>
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-col :span="11" style="float: none">
                <el-checkbox v-model="abc"
                  >充值
                  <span class="juli2"
                    ><el-input
                      class="inpu"
                      v-model="input"
                      placeholder="请输入内容"
                    ></el-input>
                    <el-button size="medium">元</el-button></span
                  ></el-checkbox
                >
              </el-col>
            </el-form-item>
          </div>
             <el-form-item label="有效期">
          <el-radio-group v-model="radio">
            <el-radio :label="6">永久有效</el-radio>
          </el-radio-group>
             </el-form-item>
              <el-form-item>
          <el-radio-group v-model="radio">
            <el-radio :label="3">自获得之日起</el-radio>
             <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="今天" value="shanghai"></el-option>
              <el-option label="5天前" value="beijing"></el-option>
            </el-select>
          </el-radio-group><span class="you-xiao">有效</span>
             </el-form-item>

             <el-form-item label="续卡提醒">
          <el-radio-group v-model="radio">
            <el-radio :label="9">不提醒</el-radio>
          </el-radio-group>
             </el-form-item>
              <el-form-item>
          <el-radio-group v-model="radio">
            <el-radio :label="12">距离到期前</el-radio>
             <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="今天" value="shanghai"></el-option>
              <el-option label="10天前" value="beijing"></el-option>
            </el-select>
          </el-radio-group><span class="you-xiao">提醒</span>
             </el-form-item>

          <el-form-item label="会员权益">
            <el-col :span="11">
              <el-checkbox v-model="abcde">成长加速</el-checkbox></el-col
            >
          </el-form-item>
          <el-form-item>
            <el-col :span="11">
              <el-checkbox v-model="abcdef">商品折扣</el-checkbox></el-col
            >
          </el-form-item>
          <el-form-item>
            <el-col :span="11">
              <el-checkbox v-model="abcdefg">积分翻倍</el-checkbox></el-col
            >
          </el-form-item>

            <el-form-item>
            <el-col :span="11">
              <el-checkbox v-model="abcdefgl">送优惠劵</el-checkbox>
              <span class="juli3">选择优惠劵</span></el-col
            >
          </el-form-item>
           <div>
            <el-form-item>
              <el-col :span="11" style="float: none">
                <el-checkbox v-model="abc"
                  >送积分
                  <span class="juli2"
                    ><el-input
                      class="inpu"
                      v-model="input"
                      placeholder="请输入"
                    ></el-input>
                    <el-button size="medium">分</el-button></span
                  ></el-checkbox
                >
              </el-col>
            </el-form-item>
          </div>
          <el-row>
            <el-form-item>
              <el-button type="primary">提交</el-button>
              <el-button>返回</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <div class="tupian">
       <span class="tupian-zi">超级会员</span>
       <span class="tupian-2">
         有效期至：2020年9月10号到期
       </span>
       <span class="tupian-4">预计为你节省: <span class="zhi-ti">888</span> 元/年</span>
      </div>
    </div>
  </div>
  </div>
</template>

<style lang="less" scoped>
.you-xiao{
    font-size:18px;
    margin-left: 15px;
}
.gao-du {
  height: 70px;
}
.tupian-4{
  position: relative;
  left: 10%;
  top: 60%;
  font-size:20px;
   color: aliceblue;
}
.zhi-ti{
  font-size: 30px;
}
.tupian-2{
  position: relative;
  left: -22%;
  top: 50%;
   color: aliceblue;
  font-size:18px;
}
.tupian{
  height: 250px;
  width: 400px;
  background: rgb(230, 159, 6);
  border-radius: 20px;
  position: relative;
  left: 60%;
  top: -760px;
}

.tupian-zi{
  font-size: 30px;
  position: relative;
  top:10%;
  left: 10%;
  color: aliceblue;
  
}
.guan-li {
  line-height: 50px;
}
.gao-li {
  margin-left: 200px;
}
.shang {
  margin-top: 30px;
}
.gao-kuan {
  margin-top: 20px;
  height: 1000px;
  width: 100%;
  background: white;
  .djmc {
    width: 600px;
  }
  .czz {
    padding-top: 30px;
  }
  .juli {
    margin-left: 30px;
  }
  .juli2 {
    margin-left: 20px;
  }
  .juli3 {
    margin-left: 25px;
  }
}
.inpu {
  width: 250px;
}
</style>
<script>
export default {
  data() {
    return {  
         radio:3,
      checked: true,
      a: true,
      abc: true,
      abc: true,
      abcd: true,
      abcde: true,
      abcdef: true,
      abcdefg: true,
      abcdefgl:true,
      input2: "",
      input: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script> -->